<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>随机字符串生成工具</title>
    <link rel="stylesheet" href="../../bootstrap/bootstrap.min.css">
</head>

<body>
    <div class="container mt-5">
        <h1 class="mb-4">随机字符串生成工具</h1>
        <form>
            <div class="form-group mb-3">
                <label for="num">要生成的字符串个数：</label>
                <input type="number" class="form-control" id="num" value="10" min="1" max="100">
            </div>
            <div class="form-group mb-3">
                <label for="length">字符串长度：</label>
                <input type="number" class="form-control" id="length" value="8" min="1" max="50">
            </div>
            <div class="form-group mb-3">
                <label for="uppercase">包含大写字母：</label>
                <input type="checkbox" id="uppercase" checked>
            </div>
            <div class="form-group mb-3">
                <label for="lowercase">包含小写字母：</label>
                <input type="checkbox" id="lowercase" checked>
            </div>
            <div class="form-group mb-3">
                <label for="numbers">包含数字：</label>
                <input type="checkbox" id="numbers" checked>
            </div>
            <div class="form-group mb-3">
                <label for="punctuation">包含标点符号：</label>
                <input type="checkbox" id="punctuation" checked>
            </div>
            <button type="button" class="btn btn-primary" onclick="generate()">生成</button>
        </form>
        <div class="mt-4">
            <p>随机字符串列表：</p>
            <div id="result" class="random-string"></div>
        </div>
    </div>
    <style>
        .random-string {
            max-width: 500px;
        }
    </style>
    <script>
        const uppercaseChar = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        const lowercaseChar = "abcdefghijklmnopqrstuvwxyz";
        const numberChar = "0123456789";
        const punctuationChar = "!\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~";

        function generate() {
            const num = parseInt(document.getElementById("num").value);
            const length = parseInt(document.getElementById("length").value);
            const includeUppercase = document.getElementById("uppercase").checked;
            const includeLowercase = document.getElementById("lowercase").checked;
            const includeNumbers = document.getElementById("numbers").checked;
            const includePunctuation = document.getElementById("punctuation").checked;

            if (isNaN(num) || isNaN(length)) {
                alert("请输入数字！");
                return;
            }

            if (!includeUppercase && !includeLowercase && !includeNumbers && !includePunctuation) {
                alert("至少要选择一种字符类型！");
                return;
            }

            let result = "";
            for (let i = 0; i < num; i++) {
                let randomString = "";
                while (randomString.length < length) {
                    let possibleChars = "";
                    if (includeUppercase) {
                        possibleChars += uppercaseChar;
                    }
                    if (includeLowercase) {
                        possibleChars += lowercaseChar;
                    }
                    if (includeNumbers) {
                        possibleChars += numberChar;
                    }
                    if (includePunctuation) {
                        possibleChars += punctuationChar;
                    }
                    randomString += possibleChars.charAt(Math.floor(Math.random() * possibleChars.length));
                }
                result += randomString;
                if (i < num - 1) {
                    result += "<br>";
                }
            }
            document.getElementById("result").innerHTML = result;
        }
    </script>
</body>

</html>